/**
 * 收藏页面组件 (Favorites Page Component)
 * 
 * 功能说明：
 * - 展示用户收藏的商品列表
 * - 支持取消收藏操作
 * - 提供商品详情查看功能
 * - 实现分页加载
 * - 响应式布局设计
 * - 加载状态和空状态处理
 * 
 * 主要特性：
 * - 权限控制：仅登录用户可访问
 * - 实时更新：取消收藏后立即更新列表
 * - 图片处理：支持本地和远程图片显示
 * - 商品信息：显示价格、描述、卖家、成色等
 * - 用户交互：查看详情、取消收藏确认
 * 
 * 技术实现：
 * - React Hooks状态管理
 * - Ant Design组件库
 * - 响应式网格布局
 * - API数据获取和更新
 * - 错误处理和用户提示
 */

import React, { useState, useEffect } from 'react'
import { 
  Card, 
  Row, 
  Col, 
  Button, 
  message, 
  Empty, 
  Tag, 
  Pagination,
  Modal,
  Typography,
  Space,
  Skeleton,
  Avatar
} from 'antd'
import { 
  HeartFilled, 
  EyeOutlined, 
  DeleteOutlined,
  ShoppingCartOutlined,
  UserOutlined
} from '@ant-design/icons'
import { useAuthStore } from '@stores/auth'
import { useNavigate } from 'react-router-dom'
import apiClient from '../services/api'

const { Meta } = Card
const { Text, Title } = Typography

/**
 * 商品成色映射配置
 * 
 * 定义不同成色等级对应的显示文本和颜色：
 * - new: 全新（绿色）
 * - like_new: 几乎全新（蓝色）
 * - good: 良好（青色）
 * - fair: 一般（橙色）
 * - poor: 较差（红色）
 */
const CONDITION_MAP = {
  new: { text: '全新', color: 'green' },
  like_new: { text: '几乎全新', color: 'blue' },
  good: { text: '良好', color: 'cyan' },
  fair: { text: '一般', color: 'orange' },
  poor: { text: '较差', color: 'red' }
}

/**
 * 收藏页面主组件
 * 
 * 功能：
 * - 管理收藏列表状态
 * - 处理用户交互操作
 * - 渲染收藏商品卡片
 * - 提供分页和搜索功能
 */
function FavoritesPage() {
  const { isAuthenticated } = useAuthStore()
  const navigate = useNavigate()

  // ==================== 状态管理 ====================
  
  /**
   * 加载状态
   * - true: 正在加载数据
   * - false: 数据加载完成
   */
  const [loading, setLoading] = useState(true)
  
  /**
   * 收藏列表数据
   * 包含用户收藏的所有商品信息
   */
  const [favorites, setFavorites] = useState([])
  
  /**
   * 分页配置
   * - current: 当前页码
   * - pageSize: 每页显示数量
   * - total: 总收藏数量
   */
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 12,
    total: 0
  })

  // ==================== 生命周期管理 ====================
  
  /**
   * 组件初始化
   * 
   * 功能：
   * - 检查用户登录状态
   * - 未登录用户重定向到登录页
   * - 已登录用户加载收藏数据
   */
  useEffect(() => {
    if (!isAuthenticated) {
      message.error('请先登录')
      navigate('/login')
      return
    }

    fetchFavorites()
  }, [isAuthenticated, navigate, pagination.current, pagination.pageSize])

  // ==================== API数据获取 ====================
  
  /**
   * 获取收藏列表数据
   * 
   * 功能：
   * - 调用后端API获取收藏列表
   * - 处理分页参数
   * - 更新状态和分页信息
   * - 错误处理和用户提示
   */
  const fetchFavorites = async () => {
    try {
      setLoading(true)
      
      // 构建请求参数
      const params = {
        page: pagination.current,
        limit: pagination.pageSize
      }

      // 调用API获取收藏列表
      const response = await apiClient.get('/api/favorites', { params })
      
      if (response.data.success) {
        // 更新收藏列表数据
        setFavorites(response.data.data.favorites || [])
        // 更新分页信息
        setPagination(prev => ({
          ...prev,
          total: response.data.data.pagination?.totalItems || 0
        }))
      }
    } catch (error) {
      console.error('获取收藏列表失败:', error)
      message.error('获取收藏列表失败，请稍后重试')
    } finally {
      setLoading(false)
    }
  }

  // ==================== 用户交互处理 ====================
  
  /**
   * 取消收藏操作
   * 
   * 功能：
   * - 调用API删除收藏记录
   * - 更新本地状态
   * - 更新分页总数
   * - 提供用户反馈
   * 
   * @param {number} productId - 商品ID
   */
  const handleUnfavorite = async (productId) => {
    try {
      // 调用API取消收藏
      await apiClient.delete(`/api/favorites/${productId}`)
      
      // 从本地列表中移除该商品
      setFavorites(prev => prev.filter(fav => fav.Product.id !== productId))
      // 更新总数
      setPagination(prev => ({ ...prev, total: prev.total - 1 }))
      
      message.success('取消收藏成功')
    } catch (error) {
      console.error('取消收藏失败:', error)
      message.error('取消收藏失败')
    }
  }

  /**
   * 确认取消收藏
   * 
   * 功能：
   * - 显示确认对话框
   * - 防止误操作
   * - 提供用户友好的交互体验
   * 
   * @param {Object} product - 商品信息
   */
  const confirmUnfavorite = (product) => {
    Modal.confirm({
      title: '确认取消收藏',
      content: `确定要取消收藏"${product.name}"吗？`,
      onOk: () => handleUnfavorite(product.id),
      okText: '确定',
      cancelText: '取消'
    })
  }

  /**
   * 跳转到商品详情页
   * 
   * 功能：
   * - 导航到商品详情页面
   * - 传递商品ID参数
   * 
   * @param {number} productId - 商品ID
   */
  const handleViewProduct = (productId) => {
    navigate(`/products/${productId}`)
  }

  // ==================== 工具函数 ====================
  
  /**
   * 格式化时间显示
   * 
   * 功能：
   * - 将时间戳转换为可读格式
   * - 显示日期和时间
   * 
   * @param {string|number} timestamp - 时间戳
   * @returns {string} 格式化后的时间字符串
   */
  const formatTime = (timestamp) => {
    const date = new Date(timestamp)
    return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN', { 
      hour: '2-digit', 
      minute: '2-digit' 
    })
  }

  /**
   * 处理分页变化
   * 
   * 功能：
   * - 更新分页状态
   * - 触发数据重新加载
   * 
   * @param {number} page - 页码
   * @param {number} pageSize - 每页数量
   */
  const handlePageChange = (page, pageSize) => {
    setPagination(prev => ({ ...prev, current: page, pageSize }))
  }

  /**
   * 获取图片完整URL，自动适配本地和公网
   * @param {string} imgPath
   * @returns {string}
   */
  const getImageUrl = (imgPath) => {
    if (!imgPath) return 'https://via.placeholder.com/300x200?text=No+Image';
    if (imgPath.startsWith('http')) return imgPath;
    return `${window.location.origin}${imgPath.startsWith('/') ? imgPath : '/' + imgPath}`;
  };

  // ==================== 子组件定义 ====================
  
  /**
   * 收藏商品卡片组件
   * 
   * 功能：
   * - 显示商品基本信息
   * - 提供操作按钮
   * - 处理图片显示
   * - 响应式布局
   * 
   * @param {Object} props - 组件属性
   * @param {Object} props.favorite - 收藏记录
   * @param {Function} props.onUnfavorite - 取消收藏回调
   * @param {Function} props.onView - 查看详情回调
   */
  const FavoriteCard = ({ favorite, onUnfavorite, onView }) => {
    const product = favorite.Product
    return (
      <Card
        hoverable
        style={{ minHeight: '420px', height: '420px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative' }}
        cover={
          <img
            alt={product.name}
            src={getImageUrl(product?.ProductImages?.[0]?.image_url)}
            style={{ width: '100%', height: '200px', objectFit: 'cover' }}
            onError={e => { e.target.onerror = null; e.target.src = 'https://via.placeholder.com/300x200?text=No+Image'; }}
          />
        }
        styles={{ body: { flex: 1, display: 'flex', flexDirection: 'column', paddingBottom: 56 } }} // 预留底部操作栏高度
      >
        <Card.Meta
          avatar={<Avatar src={product?.User?.avatar_url} icon={<UserOutlined />} />}
          title={product?.name || '商品已删除'}
          description={
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 60 }}>
              {/* 商品描述，最多2行省略号 */}
              <div style={{ marginBottom: '8px', flex: 1, maxHeight: 44, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', color: '#444', fontSize: 15 }}>
                {product?.description}
              </div>
              {/* 卖家信息和商品成色 */}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 'auto' }}>
                <span style={{ color: '#666' }}>卖家：{product?.User?.nickname || product?.User?.username || '未知'}</span>
                  {product?.condition_rating && (
                    <Tag color={CONDITION_MAP[product.condition_rating]?.color || 'default'}>
                      {CONDITION_MAP[product.condition_rating]?.text || product.condition_rating}
                    </Tag>
                  )}
              </div>
            </div>
          }
        />
        {/* 固定底部操作栏，始终对齐底部 */}
        <div style={{
          position: 'absolute',
          left: 0,
          right: 0,
          bottom: 0,
          background: '#fff',
          borderTop: '1px solid #f0f0f0',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          padding: '8px 16px',
          zIndex: 2
        }}>
          <div style={{ color: '#ff4d4f', fontSize: '18px', fontWeight: 'bold' }}>
            ￥{product?.price}
          </div>
          <div>
            <Button type="link" icon={<EyeOutlined />} onClick={() => onView(product?.id)} key="view">查看详情</Button>
            <Button type="link" icon={<DeleteOutlined />} danger onClick={() => onUnfavorite(product?.id)} key="unfav">取消收藏</Button>
          </div>
        </div>
      </Card>
    )
  }

  // ==================== 页面渲染 ====================
  
  return (
    <div style={{ marginTop: 64, marginLeft: isAuthenticated ? 200 : 0, minHeight: 'calc(100vh - 64px)' }}>
      <Card title="我的收藏" style={{ maxWidth: 1200, margin: '0 auto' }}>
        {/* 收藏统计信息 */}
        <div style={{ marginBottom: 16 }}>
          共收藏了 <b>{pagination.total}</b> 件商品
        </div>
        
        {/* 内容区域 */}
        {loading ? (
          // 加载状态：显示骨架屏
          <Row gutter={[16, 16]}>
            {Array.from({ length: pagination.pageSize }).map((_, idx) => (
              <Col xs={24} sm={12} md={8} lg={6} key={idx}>
                <Card loading />
              </Col>
            ))}
          </Row>
        ) : favorites.length === 0 ? (
          // 空状态：显示空数据提示
          <Empty description="暂无收藏" style={{ marginTop: 60 }} />
        ) : (
          // 正常状态：显示收藏列表
          <Row gutter={[16, 16]}>
            {favorites.map(fav => (
              <Col xs={24} sm={12} md={8} lg={6} key={fav.id}>
                <FavoriteCard 
                  favorite={fav} 
                  onUnfavorite={handleUnfavorite} 
                  onView={handleViewProduct} 
                />
              </Col>
            ))}
          </Row>
        )}
      </Card>
    </div>
  )
}

export default FavoritesPage 